<template>
  <div id="dataStatistics">
    <div class="select-nav">
      <select id="orderOption" @change="qiehuan">
        <option value="order">订单量</option>
        <option value="tour">讲解游客</option>
      </select>
      <el-radio-group v-model="radio1" size="small" @change="getRadioData">
        <el-radio-button label="本周" :disabled="radioTrue"></el-radio-button>
        <el-radio-button label="本月" :disabled="radioTrue"></el-radio-button>
        <el-radio-button label="本年" :disabled="radioTrue"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="echarts" ref="main" style="height: 100%"></div>
  </div>
</template>

<script>
import echarts from "@/echarts/index";
import { getOrderBar, getTeachNum } from "@/network/api/dataState/index";
export default {
  name: "dataStatistics",
  data() {
    return {
      value: "",
      radio1: "本周",
      weekData: ["第1天", "第2天", "第3天", "第4天", "第5天", "第6天", "第7天"],
      monthData1: ["第1周", "第2周", "第3周", "第4周"],
      yearData2: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      dateData: [],
      dateData1: [],
      dateData2: [],
      barData1: [],
      barDate2: ["本日", "本周", "本月", "本年"],
      radioTrue: false,
    };
  },
  mounted() {
    this.getBarData().then(() => {
      this.InitEcharts(this.dateData, this.weekData);
    });
    this.getTeachNumData();
  },
  methods: {
    InitEcharts(dateData, dates) {
      let myecharts = echarts.init(this.$refs.main);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: dates,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: dateData,
          },
        ],
      };
      option && myecharts.setOption(option);
      window.onresize = () => {
        myecharts.resize();
      };
    },
    qiehuan(e) {
      if (e.target.value == "order") {
        this.radio1 = "本周";
        this.radioTrue = false;
        this.InitEcharts(this.dateData, this.weekData);
      } else if (e.target.value == "tour") {
        this.radioTrue = true;
        this.InitEcharts(this.barData1, this.barDate2);
      }
    },
    async getBarData() {
      let result = await getOrderBar();
      this.dateData = result.data.data.countOrderVO.weekOrder;
      this.dateData1 = result.data.data.countOrderVO.monthOrder;
      this.dateData2 = result.data.data.countOrderVO.yearOrder;
    },
    getRadioData(val) {
      if (val == "本周") {
        this.InitEcharts(this.dateData, this.weekData);
      } else if (val == "本月") {
        this.InitEcharts(this.dateData1, this.monthData1);
      } else if (val == "本年") {
        this.InitEcharts(this.dateData2, this.yearData2);
      }
    },
    async getTeachNumData() {
      let result = await getTeachNum();
      let date = result.data.data.countOrderPVO;
      for (let key in date) {
        this.barData1.push(date[key]);
      }
    },
  },
};
</script>

<style scoped lang="scss">
#dataStatistics {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .select-nav {
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    z-index: 9999;
    #orderOption {
      outline: none;
      border: 1px solid #929292;
      background-color: #000;
      color: #fff;
      padding: 5px 50px 5px 10px;
      border-radius: 5px;
    }
  }
}
.echarts {
  width: 100%;
  height: 100%;
  margin-top: -40px;
}
</style>